<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>360浏览器</title>
		<style>
			/* 初始化 */
			*{
				margin: 0;
			}
			img{
				vertical-align: bottom;
				
			}
			/* 测试样例 */
			.bd{
				border: 1px solid  red;
			}
			.fl{
				float: left;
			}
			.fr{
				float: right;
			}
			.w{
				width: 958px;
				margin: 0 auto;
			}
			.header{
				height: 62px;
				background: url(images/herder_bg_02.jpg);
				
			}
			.logo{
				/* 上 右 下 左 */
				padding: 11px 0 0 7px;
			}
			.nav{
				padding-top: 5px;
				padding-right: 13px;

			}
 			.banner{
				 background: url(images/banner1_03.jpg); 
			 }
			 .main{
				 padding-top: 62px;
				 height: 555px;
			 }
			 .feather{
				 height: 185px;
			 }
			 .main .feather:nth-child(2n+1){
				 /* margin-right: 86px; */
				padding-left: 143px;
				width: 293px;
				
				background-repeat: no-repeat;

				}
			.main .feather:nth-child(n){
				padding-left: 141px;
				width: 295px;
				height: 185px;
				background-repeat: no-repeat;
				}
			 .feather:nth-child(1){
			
				background: url(images/icon_21.jpg) no-repeat ;
				}
			 .feather:nth-child(2){
				
				 background:url(images/icon_23.jpg)  no-repeat 23px 0px;
				 }
		     .feather:nth-child(3){
				
				 background:url(images/icon_28.jpg)  no-repeat 19px 0px;
				 }
			 .feather:nth-child(4){
				 
				background:url(images/icon_30.jpg)  no-repeat 20px 0px;
				}
			  .feather:nth-child(5){
				
				 background:url(images/icon_35.jpg) no-repeat 18px 0px;
				 }
			.feather:nth-child(6){
				
				 background:url(images/icon_37.jpg)  no-repeat 25px 0px;
				 }				 
			 .main .fr{
				 padding-left: 86px;
			 }
			 h4{
				font-size: 27px;
				line-height: 28px;
				padding-top: 8px;
				padding-bottom: 20px;
				color: #386199;
				}
			p{
				font-size: 13px;
				color: #999894;
				}
			.end p{
				font-size: 13px;
				text-align: center;
				color: #bab8bb;
			}
			.end{
				padding-top: 20px;
				padding-bottom: 19px;
				background: url(./images/360手机桌面_03.jpg);
				}
				.end p:nth-child(1){
					line-height: 13px;
					padding-bottom: 7px;
				}
				.end p:nth-child(2){
					line-height: 11px;
				}
		</style> 
	</head>
	<body>
		<div class=" header ">
			<div class="w">
				<div class="fl logo"><img src="images/logo_05.jpg" alt=""></div>
				<div class="fr nav"><img src="images/nav_05.jpg" alt=""></div>
			</div>
		</div>
		<div class="banner">
			<div class="w">
				
			<div><img src="images/banner1_05.jpg" alt=""></div>
			<div><img src="images/banner1_07.jpg" alt=""></div>
			</div>
		</div>
		<div class="w main">
		   
		    <div class="fl feather">	
		    	<h4 >简洁清新美观</h4>
		    	<p>清新风格更简洁、更美观，百变主题更个性、更抢眼，贴心小工具，丰富新功能，让你的桌面从此与众不同。</p>
		    </div>	
		   
		    <div class="fl feather">
		    	 
		    	<h4>操作简便直观</h4>
		    	<p>长按桌面即可添加更换各种应用、文件夹、小工具，也可方便的选择主题和壁纸为手机换肤，所见即所得的直观操作带来更加简便的使用体验。</p>
		    </div>
		    <div class="fl feather">
		    	
		    	<h4>千变万化主题</h4>
		    	<p>海量主题任你选择，在线主题、壁纸内容不断增加中，每日不同的心情，都能找到恰到好处的个性化呈现方式，让手机天天都是精致的表情。</p>
		    </div>
		    <div class="fl feather">
		    	
		    	<h4>贴心实用工具</h4>
		    	<p>时钟天气、一键清理、一键节电、日历……不用打开应用，桌面上即可快速进行常用小工具的操作，使用手机更方便，更快捷。</p>
		    </div>
		    <div class="fl feather">
		    	
		    	<h4>屏幕手势管理</h4>
		    	<p>双指一捏的合并手势操作即可对屏幕进行可视化操作，可添加多达9屏的屏幕，快速浏览切换屏幕，增减屏幕个数及调整屏幕位置，来体验智能手机的触控乐趣吧。</p>
		    </div>
		    <div class="fl feather ">
				
		    	<h4>个人深度定制</h4>
		    	<p>图标壁纸随意换，划屏特效随心改，小工具大小任意调，深度定制属于你自己的完美桌面，个性创意毫无拘束，手机屏幕就是你的绘画板。</p>
		    </div>
		</div>
		<div class="end">
				<div class="w">
					<p>Copyright©2005-2012 360.CN All Rights Reserved 360安全中心</p>
					<p>隐私权政策  京ICP证080047号</p>
				</div>
			</div>
	</body>
</html>
 